<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/static/jstl.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>star-首页</title>
<link rel="stylesheet" type="text/css"
	href="${Static_index }/css/index.css">
<%@include file="/WEB-INF/jsp/static/hxk_js.jsp"%>
<style type="text/css">
/*立方体*/
.l-perspective {
	perspective: 1000px;
}

@keyframes lRun {
from { transform:rotateX(0deg)rotateY(0deg);}

to {
	transform: rotateX(360deg) rotateY(360deg);
}

}
@-webkit-keyframes lRun {
from { transform:rotateX(0deg)rotateY(0deg);
	
}

to {
	transform: rotateX(360deg) rotateY(360deg);
}

}
.l-box {
	transform-style: preserve-3d;
	width: 200px;
	height: 200px;
	margin: 100px auto;
	animation: lRun 3s ease;
	-webkit-animation: lRun 3s ease;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

div[class^="mydiv"] {
	height: 200px;
	width: 200px;
	opacity: 0.5;
	position: absolute;
	transition: transform 1s ease 0s;
}

.mydiv1 {
	background: #0000FF;
	transform: translateZ(100px);
}

.mydiv2 {
	background: #008000;
	transform: translateZ(-100px);
}

.mydiv3 {
	background: #808080;
	transform: rotateY(90deg) translateZ(-100px);
}

.mydiv4 {
	background: #8B4513;
	transform: rotateY(90deg) translateZ(100px);
}

.mydiv5 {
	background: #FF0000;
	transform: rotateX(90deg) translateZ(100px);
}

.mydiv6 {
	background: #FFFF00;
	transform: rotateX(90deg) translateZ(-100px);
}

.l-box:hover .mydiv1 {
	background: #0000FF;
	transform: translateZ(200px);
}

.l-box:hover .mydiv2 {
	background: #008000;
	transform: translateZ(-200px);
}

.l-box:hover .mydiv3 {
	background: #808080;
	transform: rotateY(90deg) translateZ(-200px);
}

.l-box:hover .mydiv4 {
	background: #8B4513;
	transform: rotateY(90deg) translateZ(200px);
}

.l-box:hover .mydiv5 {
	background: #FF0000;
	transform: rotateX(90deg) translateZ(200px);
}

.l-box:hover .mydiv6 {
	background: #FFFF00;
	transform: rotateX(90deg) translateZ(-200px);
}
</style>
</head>
<body>
	<h1
		style="font-size: 20px; text-align: center; padding: 1rem; background: rgba(200, 200, 200, .5);">star-首页</h1>
	<div class="l-perspective">
		<div class="l-box">
			<div class="mydiv1">
				<img class="index-img" src="${Static_index }/image/index.jpg"
					style="width: 100%; height: 100%;">
			</div>
			<div class="mydiv2"></div>
			<div class="mydiv3"></div>
			<div class="mydiv4"></div>
			<div class="mydiv5"></div>
			<div class="mydiv6"></div>
		</div>
	</div>
	<div
		style="position: relative; width: 100%; height: auto; margin: 0 auto;">
		<img class="index-img" alt="" src="${Static_index }/image/index.jpg"
			style="width: 100%;">
	</div>
	<div>
		<h2 style="text-align: center;">微信公众号二维码</h2>
		<img src="${Static_index }/image/wechatQRCode.jpg"
			style="width: 100%;">
	</div>
	<div>
		<h2 style="text-align: center;">首页二维码</h2>
		<img src="${Static_index }/image/indexQRCode.png" style="width: 100%;">
	</div>
	<%@include file="/WEB-INF/jsp/static/hxk_nav.jsp"%>
</body>
<script type="text/javascript">
	$(function() {
		$("img:nth-child(n+2)").click(function() {
			$liu(this).shake();
		});

	});
</script>
</html>
